<template>
  <div class="icon-background" :style="{padding: padding, display:display}">
    <i class="iconfont" v-bind:class="fontClass"
       :style="{fontSize: this.size, fontWeight: this.weight, color: color}"></i>
  </div>
</template>

<script>
  export default {
    name: "icon-button",
    props: {
      fontClass: {
        type: String
      },
      color: {
        type: String,
        default: "white"
      },
      size: {
        type: String,
        default: '22px'
      },
      weight: {
        type: String,
        default: "400"
      },
      shape: {
        type: String,
        default: "circle"
      },
      padding: {
        type: String,
        default: "20px 0px"
      },
      display: {
        type: String,
        default: "flex"
      }
    }
  }
</script>

<style scoped>
  .icon-background {
    align-items: center;
    justify-content: center;
    /*padding: 20px 0px;*/
    cursor: pointer;
  }
</style>
